<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
    <link rel="stylesheet" href="../../css/framework7-icons.css">
  </head>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script src="https://unpkg.com/react@16.4.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.4.1/umd/react-dom.production.min.js"></script>
    <script src="../../packages/react/framework7-react.min.js"></script>
    <script src="../../packages/core/js/framework7.min.js"></script>
    <script type="text/babel">
      class AppComponent extends React.Component {
        constructor() {
          super();
      
          const items = [];
          for (let i = 1; i <= 10000; i += 1) {
            items.push({
              title: `Item ${i}`,
              subtitle: `Subtitle ${i}`,
            });
          }
      
          this.state = {
            items,
            vlData: {
              items: [],
            },
          };
        }
        searchAll(query, items) {
          const found = [];
          for (let i = 0; i < items.length; i += 1) {
            if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
          }
          return found; // return array with mathced indexes
        }
        renderExternal(vl, vlData) {
          this.setState({ vlData });
        }
        render() {
          return (
            <App>
              <View main>
                <Page>
                  <Navbar title="Virtual List">
                    <Subnavbar inner={false}>
                      <Searchbar
                        searchContainer=".virtual-list"
                        searchItem="li"
                        searchIn=".item-title"
                      ></Searchbar>
                    </Subnavbar>
                  </Navbar>
                  <Block>
                    <p>Virtual List allows to render lists with huge amount of elements without loss of performance. And it is fully compatible with all Framework7 list components such as Search Bar, Infinite Scroll, Pull To Refresh, Swipeouts (swipe-to-delete) and Sortable.</p>
                    <p>Here is the example of virtual list with 10 000 items:</p>
                  </Block>
                  <List className="searchbar-not-found">
                    <ListItem title="Nothing found"></ListItem>
                  </List>
                  <List
                    className="searchbar-found"
                    medialList
                    virtualList
                    virtualListParams={{ items: this.state.items, searchAll: this.searchAll, renderExternal: this.renderExternal.bind(this), height: this.$theme.ios ? 63 : 73}}
                  >
                    <ul>
                      {this.state.vlData.items.map((item, index) => (
                        <ListItem
                          key={index}
                          mediaItem
                          link="#"
                          title={item.title}
                          subtitle={item.subtitle}
                          style={{top: `${this.state.vlData.topPosition}px`}}
                        ></ListItem>
                      ))}
                    </ul>
                  </List>
                </Page>
              </View>
            </App>
          )
        }
      }
    </script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      
      if (Framework7.use) Framework7.use(Framework7React, { theme: theme });
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(Framework7React, { theme: theme });
      
      var plugin = {
        params: {
          theme: theme,
        }
      };
      
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
      window.onload = function () {
        if (typeof AppComponent !== 'undefined') {
          ReactDOM.render(
            React.createElement(AppComponent),
            document.getElementById('app')
          );
        }
      }
    </script>
  </body>
</html>